<template>
  <el-dialog title="题目预览" :visible="showDialog" width="60%" @close="closeDialog">
    <el-row class="bottom">
      <el-col :span="6">
        <p>【题型】: {{ questionType }}</p>
        <p>【学科】: {{ questionViews.subjectName }}</p>
      </el-col>
      <el-col :span="6">
        <p>【编号】: {{ questionViews.id }}</p>
        <p>【目录】: {{ questionViews.directoryName }}</p>
      </el-col>
      <el-col :span="6">
        <p>【难度】: {{ difficulty }}</p>
        <p>【方向】: {{ questionViews.direction }}</p>
      </el-col>
      <el-col :span="6">
        <p>【标签】: {{ questionViews.tags }}</p>
      </el-col>
    </el-row>
    <!-- 单选题 -->
    <el-row class="bottom click" v-if="questionViews.questionType === '1'">
      <p>
        【题干】:
        <span v-html="questionViews.question"></span>
        <el-radio v-model="item.isRight" v-for="item in questionViews.options" :key="item.id" :label="1">
          {{ item.title }}</el-radio>
      </p>
    </el-row>
    <!-- 多选题 -->
    <el-row class="bottom" v-else-if="questionViews.questionType === '2'">
      <p>
        【题干】:
        <span v-html="questionViews.question"></span>
        <el-checkbox-group v-model="queryCheckList">
          <el-checkbox v-for="item in questionViews.options" :key="item.id" :label="item.isRight">{{ item.title }}
          </el-checkbox>
        </el-checkbox-group>
      </p>
    </el-row>
    <!-- 简答题 -->
    <el-row class="bottom" v-else>
      <p>
        【题干】:
        <span v-html="questionViews.question" style="color: #0000ff"></span>
      </p>
    </el-row>
    <el-row class="bottom">
      <p>
        【参考答案】:
        <el-button type="danger" size="small" @click="isShow = !isShow">视频答案预览</el-button>
        <video v-if="isShow" controls autoplay>
          <source :src="questionViews.videoURL" type="video/mp4" />
        </video>
      </p>
    </el-row>
    <el-row class="bottom">
      <p>【答案解析】: {{ questionViews.answerID }}</p>
    </el-row>
    <el-row>
      <p>
        【题目备注】:
        <span style="color: #0000ff">{{ questionViews.remarks }}</span>
      </p>
    </el-row>
    <el-row type="flex" justify="center">
      <el-button type="primary" @click="closeDialog">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { questionType, difficulty } from '../../api/hmmm/constants'
export default {
  name: 'QSPreview',
  data () {
    return {
      isShow: false,
      queryCheckList: [1]
    }
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    questionViews: Object
  },
  methods: {
    closeDialog () {
      this.$parent.showDialog = false
      this.isShow = false
    }
  },
  computed: {
    questionType () {
      const obj = questionType.find(
        (item) => item.value + '' === this.questionViews.questionType
      )
      return obj ? obj.label : '未知'
    },
    difficulty () {
      const obj = difficulty.find(
        (item) => item.value + '' === this.questionViews.difficulty
      )
      return obj ? obj.label : '未知'
    }
  }
}
</script>

<style scoped lang='less'>
.bottom {
  border-bottom: 1px solid #000;
}
.el-radio,
.el-checkbox {
  pointer-events: none;
  display: block;
  padding: 10px 0;
}
video {
  display: block;
  width: 300px;
  height: 200px;
}
</style>
